<!--
 * @Author: sxb
 * @Email: sxb@mail.com
 * @Date: 2020-05-22 11:50:22
 * @Descripttion: 
--> 
<template>
    <div class="app-container">
        <el-form
            ref="addFormRef"
            :rules="addFormRules"
            :model="addForm"
            label-width="180px"
            :label-position="labelPosition"
            class="addForm"
        >
            <el-row>
                <el-col :span="8" >
                    <el-card :body-style="{ padding: '15px' }">
                        <h3>
                        日前填报
                        <el-switch
                            :active-color="switchActive"
                            v-model="addForm.dayData.switchDay"
                            align="right"
                        ></el-switch>
                    </h3>
                    <el-form-item label="日前填报开始设置" prop="dayData.setDayStartVal">
                        提前
                        <el-select
                            v-model="addForm.dayData.setDayStartVal"
                            clearable
                            placeholder="请选择"
                            style="width: 140px; margin-left: 5px"
                        >
                            <el-option
                                v-for="item in setDayStartArr"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                        <!-- <el-input v-model="addForm.setDayStart" style="width:120px;"></el-input>天 -->
                    </el-form-item>
                    <el-form-item label="日前填报截止日期" prop="dayData.setEndStart">
                        提前
                        <!-- <el-input v-model="addForm.dayData.setEndStart"></el-input>天 -->
                        <el-select
                            v-model="addForm.dayData.setEndStart"
                            clearable
                            placeholder="请选择"
                            style="width: 140px; margin-left: 5px"
                        >
                            <el-option
                                v-for="item in setEndStartArr"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <div class="h20"></div>
                    <el-divider></el-divider>
                    <h3>
                        月度填报
                        <el-switch
                            :active-color="switchActive"
                            v-model="addForm.monthData.switchMonth"
                        ></el-switch>
                    </h3>
                    <el-form-item label="填报开始设置" prop="monthData.setMonthStart">
                        每月
                        <el-input v-model="addForm.monthData.setMonthStart" placeholder="输入开始日期"></el-input>号
                    </el-form-item>
                    <el-form-item label="月度填报截止" prop="monthData.setMonthEnd">
                        每月
                        <el-input v-model="addForm.monthData.setMonthEnd" placeholder="输入截止日期"></el-input>号
                    </el-form-item>
                    <div class="h20"></div>
                    <el-divider></el-divider>
                    <h3>
                        年度填报
                        <el-switch
                            :active-color="switchActive"
                            v-model="addForm.yearData.switchYear"
                        ></el-switch>
                    </h3>
                    <el-form-item label="填报周期设置" prop="yearData.setYear">
                        <!-- <el-date-picker
              v-model="addForm.yearData.setYear"
              type="monthrange"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              value-format="yyyy-MM"
                        ></el-date-picker>-->
                        <el-input v-model="addForm.yearData.setYearStart" placeholder="输入开始月份"></el-input>月 -
                        <el-input v-model="addForm.yearData.setYearEnd" placeholder="输入截止月份"></el-input>月
                    </el-form-item>
                    </el-card>
                    
                </el-col>
                <el-col :span="8" :offset="1">
                  <el-card :body-style="{ padding: '15px' }">
                    <h3>截止日期</h3>
                    <el-form-item label="设置截止时间" prop="dayData.setTimeEnd">
                        <el-time-picker
                            placeholder="选择时间"
                            v-model="addForm.dayData.setTimeEnd"
                            style="margin-left:30px;"
                            value-format="HH:mm:ss"
                        ></el-time-picker>
                    </el-form-item>
                    <div class="h20"></div>
                    <el-divider></el-divider>
                    <h3>
                        倒计时设置
                        <small>（设置小程序开始倒计时的提醒时间）</small>
                    </h3>
                    <el-form-item label="倒计时设置" prop="dayData.setAdvance">
                        提前
                        <el-input v-model="addForm.dayData.setAdvance"></el-input>小时
                    </el-form-item>
                  </el-card>
                </el-col>
            </el-row>
            <el-button @click="onSaveFrom()">保存</el-button>
        </el-form>
    </div>
</template>
<script>
import {
    apiGetReportConfig,
    apiPostReportConfig,
    apiPutReportConfig
} from "../../../api/message/reportConfig";

export default {
    data() {
        var validateYearStartEnd = (rule, value, callback) => {
            let setYearStartStatus =
                this.addForm.yearData.setYearStart == null ||
                this.addForm.yearData.setYearStart == "" ||
                this.addForm.yearData.setYearStart == undefined;
            let setYearEndStatus =
                this.addForm.yearData.setYearEnd == null ||
                this.addForm.yearData.setYearEnd == "" ||
                this.addForm.yearData.setYearEnd == undefined;
            if (setYearStartStatus || setYearEndStatus) {
                callback(new Error("请输入填报周期"));
            } else if (
                Number(this.addForm.yearData.setYearEnd) <
                Number(this.addForm.yearData.setYearStart)
            ) {
                callback(new Error("开始月份要小于截止月份！"));
            } else {
                callback();
            }
        };
        var validateMonthStartEnd = (rule, value, callback) => {
            if (value < this.addForm.monthData.setMonthStart) {
                callback(new Error("开始日期要小于截止日期！"));
            } else {
                callback();
            }
        };
        var validateDayStartEnd = (rule, value, callback) => {
            if (value >= this.addForm.dayData.setDayStartVal) {
                callback(new Error("填报截止日期要小于填报开始日期！"));
            } else {
                callback();
            }
        };
        return {
            labelPosition: "left",
            setDayStartArr: [
                {
                    value: "3",
                    label: "3天"
                },
                {
                    value: "4",
                    label: "4天"
                },
                {
                    value: "5",
                    label: "5天"
                }
            ],
            setEndStartArr: [
                {
                    value: "2",
                    label: "2天"
                },
                {
                    value: "3",
                    label: "3天"
                },
                {
                    value: "4",
                    label: "4天"
                }
            ],
            addForm: {
                dayData: {
                    id: 0,
                    switchDay: false,
                    setDayStartVal: 3,
                    setEndStart: 2,
                    //设置截止时间
                    setTimeEnd: "08:30:00",
                    //倒计时设置
                    setAdvance: 5
                },
                monthData: {
                    id: 0,
                    switchMonth: false,
                    setMonthStart: 1,
                    setMonthEnd: 10
                },
                yearData: {
                    id: 0,
                    switchYear: false,
                    setYearStart: 11,
                    setYearEnd: 12
                },
                setDayStart: ""
            },
            addFormRules: {
                "dayData.setDayStartVal": [
                    {
                        required: true,
                        message: "请选择日前填报开始设置",
                        trigger: "change"
                    }
                ],
                "dayData.setEndStart": [
                    {
                        required: true,
                        message: "请选择日前填报截止日期",
                        trigger: "change"
                    },
                    {
                        required: true,
                        validator: validateDayStartEnd,
                        trigger: "change"
                    }
                ],
                "dayData.setTimeEnd": [
                    {
                        required: true,
                        message: "请输入设置截止时间",
                        trigger: "blur"
                    }
                ],
                "dayData.setAdvance": [
                    {
                        required: true,
                        message: "请输入倒计时设置",
                        trigger: "blur"
                    }
                ],
                "monthData.setMonthStart": [
                    {
                        required: true,
                        message: "请输入填报开始设置",
                        trigger: "blur"
                    }
                ],
                "monthData.setMonthEnd": [
                    {
                        required: true,
                        message: "请输入月度填报截止",
                        trigger: "blur"
                    },
                    {
                        required: true,
                        validator: validateMonthStartEnd,
                        trigger: "blur"
                    }
                ],
                "yearData.setYear": [
                    {
                        required: true,
                        validator: validateYearStartEnd,
                        trigger: "blur"
                    }
                ]
            },
            switchActive: "#006e6b",
            dialogFormVisible: false,
            form: {
                name: "",
                content: ""
            }
        };
    },
    created() {
        this.getReportConfig();
    },
    methods: {
        getReportConfig() {
            let paramObj = {
                page: 1,
                size: 999
            };
            apiGetReportConfig(paramObj)
                .then(res => {
                    let dataList = res.content;
                    if (dataList.length > 0) {
                        dataList.forEach(element => {
                            if (element.detailId == 1) {
                                this.addForm.dayData = {
                                    id: element.id,
                                    switchDay: element.isOpen,
                                    setDayStartVal: element.beginDate,
                                    setEndStart: element.endDate,
                                    setTimeEnd: element.endTime,
                                    setAdvance: element.remindHour
                                };
                            }
                            if (element.detailId == 2) {
                                this.addForm.monthData = {
                                    id: element.id,
                                    switchMonth: element.isOpen,
                                    setMonthStart: element.beginDate,
                                    setMonthEnd: element.endDate
                                };
                            }
                            if (element.detailId == 3) {
                                this.addForm.yearData = {
                                    id: element.id,
                                    switchYear: element.isOpen,
                                    setYearStart: element.beginDate,
                                    setYearEnd: element.endDate
                                };
                            }
                        });
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        onSaveFrom() {
            this.$refs.addFormRef.validate(valid => {
                if (valid) {
                    let api = apiPostReportConfig;
                    if (this.addForm.dayData.id > 0) {
                        api = apiPutReportConfig;
                    }
                    let dataList = [];
                    dataList.push({
                        id: this.addForm.dayData.id,
                        detailId: 1,
                        isOpen: this.addForm.dayData.switchDay,
                        beginDate: this.addForm.dayData.setDayStartVal,
                        endDate: this.addForm.dayData.setEndStart,
                        endTime: this.addForm.dayData.setTimeEnd,
                        remindHour: this.addForm.dayData.setAdvance
                    });
                    dataList.push({
                        id: this.addForm.monthData.id,
                        detailId: 2,
                        isOpen: this.addForm.monthData.switchMonth,
                        beginDate: this.addForm.monthData.setMonthStart,
                        endDate: this.addForm.monthData.setMonthEnd,
                        endTime: this.addForm.dayData.setTimeEnd,
                        remindHour: this.addForm.dayData.setAdvance
                    });
                    dataList.push({
                        id: this.addForm.yearData.id,
                        detailId: 3,
                        isOpen: this.addForm.yearData.switchYear,
                        beginDate: this.addForm.yearData.setYearStart,
                        endDate: this.addForm.yearData.setYearEnd,
                        endTime: this.addForm.dayData.setTimeEnd,
                        remindHour: this.addForm.dayData.setAdvance
                    });
                    api(dataList)
                        .then(res => {
                            this.$message({
                                type: "success",
                                message: "执行成功!"
                            });
                            location.reload(true);
                        })
                        .catch(error => {
                            console.log(error);
                        });
                }
            });
        }
    }
};
</script>
<style scoped lang="scss">
h3 {
    margin-top: 18px;
    margin-bottom: 18px;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
        margin-bottom: 0;
    }
}
.addForm .el-switch {
    margin-left: 225px;
}
.addForm .el-input {
    width: 140px !important;
    margin-left: 5px;
    margin-right: 5px;
}
.addForm .el-date-editor--time {
    width: 147px !important;
}

.addForm .el-form-item__content {
    /* text-align: right !Important; */
}
.addForm h3 {
    color: #666666;
}
.addForm .el-form-item__label {
    color: #999999;
}
.addForm .h20 {
    width: 100%;
    height: 20px;
    clear: both;
}
.addForm .el-button {
    background: #006e6b;
    color: #dddddd;
}

.addForm .el-button:active {
    color: #ffffff;
    border-color: #006e6b;
    outline: 0;
}
.addForm .el-button:focus,
.addForm .el-button:hover {
    color: #ffffff;
    border-color: #006e6b;
    background-color: #006e6b;
}
</style>
